<template>
	<view class="searchPage">
		<view class="topTitle flex">
			<view @click="toDome()">
				<image style="width: 40upx;height: 40upx;" src="../static/images/pt_lt.png" mode=""></image>
			</view>
			<view>
				<input @input="onKeyUserNameInput" @confirm="adddately()" class="input1" type="text" placeholder="上衣" v-model="searchValue" />
				<image @click="adddately()" class="searchBtn" style="width: 50upx;height: 50upx;" src="../static/images/ss_search.jpg" mode=""></image>
			</view>
			<view>
				<image style="width: 50upx;height: 40upx;" src="../static/images/ss_more.jpg" mode=""></image>
			</view>
		</view>
		
		<view class="title">
			<view class="fl fs21 bold C333">
				最近搜索
			</view>
			<view @click="isShow1()" class="fr">
				<image style="width: 50upx;height: 50upx;" src="../static/images/ss_del.jpg" mode=""></image>
			</view>
		</view>
		
		<view class="products">
			<view @click="ClickHistory(index)" v-if="index<15" v-for="(item,index) in latelySearch" :key="index"  class="productName fs18 C666">			
				{{item.name}}			
			</view>
		</view>
		
		<!-- <view style="clear: both;" class="title">
			<view class="fl fs21 bold C333">
				热门搜索
			</view>			
		</view>
		
		<view class="products">
			<view  v-for="(item,index) in hotSearch" :key="index"  class="productName fs18 C666">				
				{{item.name}}				
			</view>
		</view> -->
		
		
		
	</view>	
	
	
</template>

<script>
	export default {
		data() {
			return {
				key:'',
				searchValue:"",
				latelySearch:[
					// {"name":"上衣"},
					// {"name":"上衣"},
					// {"name":"上衣"},
					// {"name":"上衣"},
					// {"name":"上衣"},
					// {"name":"上衣"},
					// {"name":"上衣"}
				],
				hotSearch:[
					{"name":"手机"},
					{"name":"黄金珠宝"},
					{"name":"手机"},			
					{"name":"手机"},
					{"name":"手机"},
					{"name":"手机"},
					{"name":"黄金珠宝"},
					{"name":"手机"},
					{"name":"手机"},
					{"name":"手机"},
					
					{"name":"手机"},
					{"name":"黄金珠宝"}
					
				]
	
			}
		},
		
		onShow() {
			
		},
		onLoad(){
			this.key=uni.getStorageSync('key')
			 this.getData();
		},
		
		methods: {	
			unique(arr){
			   　　var newArr = [arr[0]];
			  　　 for(var i=1;i<arr.length;i++){
			　　　　if(newArr.indexOf(arr[i]) == -1){
			          　　 newArr.push(arr[i]);
			    　　  }
			        }
			        return newArr;
			   },
			ClickHistory(xx){
				this.searchValue=this.latelySearch[xx].name;
				this.adddately()
			},
			onKeyUserNameInput: function(event) {  
				this.searchValue = event.target.value  
			},  
			getData(){
				let that = this;
				this.$util.request({
					url: '/mobile/index.php?act=member_index&op=member_history',
					method: 'get',
					data: {
						"key":that.key						
					},
				}).then(function(res) {
					console.log(res)	
					that.latelySearch=res.datas.history.datas;
					that.latelySearch=that.unique(that.latelySearch)								
				})
			},
			adddately(){
				var that=this;
				// var aa={};
				// aa.name=this.searchValue;
				// if(this.searchValue.length != 0){					
				// this.latelySearch.push(aa);
				// this.searchValue=""
				// }
				
				// var aa={"datas":[{"name":"上衣1"},{"name":"上衣2"},{"name":"上衣3"}]}
				if(that.searchValue.trim().length<1){
					uni.showToast({
					    title: '搜索内容为空',
					    duration: 2000,
						icon:"none"
					});
					return
				}
				var aa={}
				aa.datas=that.latelySearch
				var bb={}
				bb.name=that.searchValue
				aa.datas.unshift(bb)				
				aa=JSON.stringify(aa)
				this.$util.request({
					url: '/mobile/index.php?act=member_index&op=member_history_save',
					method: 'post',
					data: {
						"key":that.key,
						"history":aa,
						"client":that.searchValue						
					},
				}).then(function(res) {
					console.log(res)	
					setTimeout(function(){
						that.searchValue=""
					},1000)		
				})
				
				
				
			},
			isShow1(){
				var that=this
				that.latelySearch=[]
				var aa={}
				aa.datas=that.latelySearch			
				aa=JSON.stringify(aa)
				this.$util.request({
					url: '/mobile/index.php?act=member_index&op=member_history_save',
					method: 'post',
					data: {
						"key":that.key,
						"history":aa,
						"client":that.searchValue						
					},
				}).then(function(res) {
					console.log(res)									
				})
			},
			toDome(){
				uni.navigateBack({
					delta:1
				})
			}
			
			
			
		}
	}
</script>

<style>
	
	.Cfe0000{
		color: #ff4300;
	}
	.Cc06{
		color: #ff4300;
	}
	.mt55mb30{
		margin-top: 55upx;
		margin-bottom: 30upx;
	}
	.Cfff{
		color: #FFFFFF;
	}
	.Cfe0000{
		color: #ff4300;
	}

	.flex{		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
	}
	.paddingL20{
		padding-left: 20upx;
	}
	.C999{
		color:#999 ;
	}
	.Cff0101{
		color:#ff0101 ;
	}
	.Cc00251{
		color: #c00251;
	}
	.strick{
		text-decoration: line-through;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.line1{
		width: 430upx;
	}
	.hide{
		display: none;
	}
	.marginB20{
		margin-bottom: 20upx;
	}
	
	.twoline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.oneline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.pl20{
		padding-left: 20upx;
	}
	.positionT{
		position: relative;
		top: 50upx;
	}
	.paddingB15{
		padding-bottom: 15upx;
	}
	.borderB{
		border-bottom: 1px solid #f4f4f6;
	}
	.borderT{
		border-top: 1px solid #f4f4f6;
	}
	.gl{
		position: absolute;
		right: 30upx;
	}
	.lh20{
		line-height: 20upx;
	}
	.lh25{
		line-height: 25upx;
	}
	.lh30{
		line-height: 30upx;
	}
	.pr30{
		padding-right: 30upx;
	}
	.C333{
		color: #333333;
	}
	.C666{
		color: #666666;
	}
	.Cf00{
		color: #ff0000;
	}
	
	.bold{
		font-weight: bold;
	}
	.C1d1d1d{
		color:#1d1d1d ;
	}
	.fs30{
		/* font-size: 30upx */
		font-size: 45upx
	}
	.fs26{
		font-size:39upx
		/* font-size: 26upx */
	}
	.fs12{
		font-size: 18upx
		/* font-size: 12upx */
	}
	.fs16{
		font-size: 24upx
		/* font-size: 16upx */
	}
	.fs14{
		font-size: 21upx
		/* font-size: 14upx */
	}
	.fs15{
		font-size: 22.5upx
		/* font-size: 15upx */
	}
	.fs27{
		font-size: 40.5upx
		/* font-size: 27upx */
	}
	.fs18{
		font-size: 27upx
		/* font-size: 18upx */
	}
	.fs28{
		font-size: 42upx
		/* font-size: 28upx */
	}
	.fs10{
		font-size: 15upx
		/* font-size: 10upx */
	}
	.fs30{
		font-size: 45upx
		/* font-size: 28upx */
	}
	.fs24{
		font-size: 36upx
		/* font-size: 24upx */
	}
	.fs20{
		font-size:30upx
		/* font-size: 20upx */
	}
	.fs22{
		font-size:33upx
		/* font-size: 22upx */
	}
	.fs21{
		font-size: 31.5upx
		/* font-size: 21upx */
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.tac{ 
		text-align: center;
	}
	.Ce5258e{
		color: #e5258e;
	}
	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}
	.searchPage{
		height: 100%;
		background-color: #FFFFFF;
	}
	.topTitle{
		position: relative;
		background-color: #ff4300;		
		padding-top:80upx;
		padding-left: 20upx;
		padding-right: 40upx;
		padding-bottom: 10upx;
		
	}
	.input1{		
		box-sizing: border-box;
		width: 557upx;
		height: 61upx;
		line-height: 61upx;
		border-radius: 31upx;
		position: relative;
		top: -12upx;
		padding-left: 50upx;
		padding-right: 80upx;
		color: #666;
		background-color: #FFFFFF;		
	}
	.searchBtn{
		position: absolute;
		right: 140upx;
		top: 75upx;
	}
	.title{
		padding: 20upx;
		background-color: #FFFFFF !important;
	}
	.products{
		box-sizing: border-box;
		width: 750upx;
		display: flex;
		flex-direction: row;		
		flex-wrap: wrap;
		padding: 20upx;
		padding-right: 0;
	}
	.productName{
		margin-right: 20upx;
		margin-top: 20upx;
		background-color: #eeeeee;
		height: 46upx;
		line-height: 46upx;
		border-radius: 23upx;
		padding: 2upx 30upx;
	}
</style>
